﻿@model IEnumerable<WebResourceInfo>
@MvcHtmlString.Create(Html.ScriptRef("plugins/lightbox.js"))

<style type="text/css">
    .d-album { margin: 0px; overflow: auto; padding: 0px; }
    .d-album li { display: inline-block; vertical-align: top; float: left; border: 1px solid #ccc; margin: 5px 0px 5px 10px; padding: 5px 5px 20px 5px; background: #fff; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
    .d-album li > .d-name { font-size: 6pt; display: none; }
    .d-album li:hover { cursor: pointer; transform: scale(1.5, 1.5); -ms-transform: scale(1.5, 1.5); -moz-transform: scale(1.5, 1.5); -o-transform: scale(1.5, 1.5); -webkit-transform: scale(1.5, 1.5); }
    .d-album li:hover > .d-name { display: block; }
    .d-overlay { position: absolute; overflow: hidden; }
</style>
@{
    Ajax.Dna().Widget()
        .UserPreferences(@<text>
    @Html.Hidden(item.GenerateFieldID("Path").ToString(), item.GetString("Path"))
    @(Ajax.Dna().TreeView()
                          .Name(item.GenerateFieldID("FoldersTreeView"))
                          .HtmlAttributes(new { style = "width:auto;height:300px;border:1px solid #cccccc;padding:5px;overflow:auto;margin:0px;" })
                          .Options(opts =>
                      {
                          opts.OnNodeSelected = "var _path=$(\">.d-treenode-content\",node).find(\".d-treenode-value\").val();$(\"#" + item.GenerateFieldID("Path") + "\").val(_path);";
                          opts.OnNodePopulate = (new System.Text.StringBuilder())
                                                                 .Append("var $n = $(node);")
                                                                 .Append("$n.addClass(\"d-treenode-loading\");")
                                                                 .Append("var _url = $(\">.d-treenode-content\", $n).find(\".d-treenode-value\").val();")
                                                                 .Append("$(\"#" + item.GenerateFieldID("FoldersTreeView") + "\").dtree(\"loadNodes\", \"")
                                                                 .Append(Url.Action("GetPaths", "WebFiles", new { Area = "" }) + "\", \"GET\", {url:_url}, $n);")
                                                                 .Append("$n.removeClass(\"d-treenode-hasChildren\");")
                                                                 .ToString();
                          opts.OnNodeLoaded = "if (node) {$(node).removeClass(\"d-treenode-loading\");}";
                      })
                      .SinglePathExpand(true)
                              .ClientBind(Url.Action("GetPaths", "WebFiles", new { Area = "", url = WebSiteContext.Current.ApplicationPath + UrlResolver.Content(WebSiteContext.Current.Web) }))
                      .ClientNodeTemplate(obj =>
                      {
                          return new HelperResult(writer =>
                          {
                              writer.Write("<li {{if Value}} class=\"d-treenode-hasChildren\" {{/if}}>");
                              writer.Write("<a href=\"javascript:void(0);\" rel=" + Url.Action("GetPaths", "WebFiles", new { Area = "" }) + "?url=${Value}\" title=\"${ToolTip}\" {{if Target}} target=\"${Target}\" {{/if}}>");
                              writer.Write("{{if ImageUrl}} <img src=\"${ImageUrl}\" class=\"d-treenode-img\" alt=\"${Text}\" /> {{/if}}");
                              writer.Write("{{if Value}} <input type=\"hidden\" class=\"d-treenode-value\" value=\"${Value}\" /> {{/if}}");
                              writer.Write("<span class=\"d-treenode-text\">${Text}</span></a></li>");
                          });
                      })
                     .GetHtml())
    <div>
        Thumb image width</div>
    <div>@Ajax.Dna().Number(item.GenerateFieldID("ImageWidth"), item.GetInt("ImageWidth")).GetHtml()</div>
    <div>
        Thumb image height</div>
    <div>@Ajax.Dna().Number(item.GenerateFieldID("ImageHeight"), item.GetInt("ImageHeight")).GetHtml()</div>
    </text>)
        .Content(@<text>
    @{
        var _w = item.GetInt("ImageWidth");
        var _h = item.GetInt("ImageHeight");
        Ajax.RegisterStartupScript("$('#" + item.GenerateFieldID("album") + " .d-img').lightBox({fixedNavigation:true,imageLoading:'"
    + Url.Content("~/content/images/lightbox-ico-loading.gif")
    + "',imageBtnPrev:'" + Url.Content("~/content/images/lightbox-btn-prev.gif")
    + "',imageBtnNext:'" + Url.Content("~/content/images/lightbox-btn-next.gif")
    + "',imageBtnClose:'" + Url.Content("~/content/images/lightbox-btn-close.gif")
    + "',imageBlank:'" + Url.Content("~/content/images/lightbox-blank.gif") + "'});");
    }
    <ul class="d-album" id="@item.GenerateFieldID("album")">
        @foreach (var photo in Model)
        {
            <li style="height:@(_h)px;width:@(_w)px;"><a class="d-img" 
                href="@photo.Url"
                style="background:url(@(photo.Url + "?thumb=true&w=" + _w.ToString() + "&h=" + _h.ToString())) no-repeat center center;height:@(_h)px;width:@(_w)px;display:block;">
            </a>
                <div class="d-name">@Path.GetFileName(photo.Url.ToString())</div>
            </li>
        }
    </ul>
    <script type="text/javascript">
        $(function () {
            var _album=$("#@item.GenerateFieldID("album")");
            _album.css({
                    "overflow": "visible",
                    "height": _album.height() + "px",
                });
        });
    </script>
    </text>)
        .Render();
}
